<!-- ArticlesOther.vue -->
<template>
    <headd />
    <div class="page-container">
      <!-- 头部横幅 -->
      <div v-if="!isLoading" class="banner">
      <div class="banner__left">
        <h1 class="banner__title animate-fade-in-up">宠物世界奥秘多</h1>
        <p class="banner__subtitle animate-fade-in-up animation-delay-300">探索宠物习性 让爱宠成为你生活的美好陪伴</p>
      </div>
      
    </div>
      <div v-else class="loading-container">
        <p class="loading-text">正在加载宠物信息...</p>
      </div>
  
      <div class="content-container">
        <!-- 宠物卡片网格 -->
        <div class="card-grid">
          <router-link
            v-for="dog in paginatedDogs"
            :key="dog.id"
            :to="{ name: 'Detail', params: { id: dog.id } }"
            class="card"
          >
            <!-- 图片容器 -->
            <div class="card__image-container">
              <img 
                :src="dog.picture" 
                :alt="dog.title + '的照片'"
                class="card__image"
              >
              <div class="card__image-overlay"></div>
            </div>
  
            <!-- 信息区域 -->
            <div class="card__content">
              <h2 class="card__title">
                {{ dog.title }}
              </h2>
              <div class="card__footer">
                <span class="card__action-text">点击查看详情</span>
                <svg 
                  class="card__arrow-icon" 
                  fill="none" 
                  stroke="currentColor" 
                  viewBox="0 0 24 24"
                >
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
                </svg>
              </div>
            </div>
          </router-link>
        </div>
  
        <!-- 分页控制 -->
        <div v-if="totalPages > 1" class="pagination">
          <div class="pagination__container">
            <!-- 左箭头按钮 -->
            <button
              @click="prevPage"
              :disabled="currentPage === 1"
              class="pagination__button pagination__button--prev"
            >
              <svg xmlns="http://www.w3.org/2000/svg" class="pagination__icon" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
              </svg>
            </button>
  
            <!-- 数字页码按钮 -->
            <button
              v-for="page in totalPages"
              :key="page"
              @click="goToPage(page)"
              class="pagination__button"
              :class="{
                'pagination__button--active': currentPage === page
              }"
            >
              {{ page }}
            </button>
  
            <!-- 右箭头按钮 -->
            <button
              @click="nextPage"
              :disabled="currentPage === totalPages"
              class="pagination__button pagination__button--next"
            >
              <svg xmlns="http://www.w3.org/2000/svg" class="pagination__icon" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
              </svg>
            </button>
          </div>
        </div>
  
        <!-- 空状态 -->
        <div v-if="paginatedDogs.length === 0 && !isLoading" class="empty-state">
          <svg xmlns="http://www.w3.org/2000/svg" class="empty-state__icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
          </svg>
          <p class="empty-state__text">暂无符合条件的宠物</p>
        </div>
      </div>
    </div>
    <fonnter />
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import fonnter from '../../components/fonnter.vue';
import headd from '../../components/head.vue';
import { useAnimalStore } from '../../stores/animalStore';

const router = useRouter();
const animalStore = useAnimalStore();

// 分页相关的逻辑
const itemsPerPage = 6;
const currentPage = ref(1);
const isLoading = ref(true); // 加载状态

// 初始化时获取数据
onMounted(async () => {
  try {
    await animalStore.fetchDogs(3, 3);; 
  } catch (error) {
    console.error('Failed to fetch dogs:', error);
  } finally {
    isLoading.value = false; // 完成加载
  }
});

const paginatedDogs = computed(() => {
  if (isLoading.value) return [];
  const start = (currentPage.value - 1) * itemsPerPage;
  return animalStore.dogs.slice(start, start + itemsPerPage);
});

const totalPages = computed(() => {
  if (isLoading.value || !animalStore.dogs.length) return 0;
  return Math.ceil(animalStore.dogs.length / itemsPerPage);
});

function goToPage(page) {
  if (page >= 1 && page <= totalPages.value) {
    currentPage.value = page;
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  }
}

function nextPage() {
  if (currentPage.value < totalPages.value) {
    goToPage(currentPage.value + 1);
  }
}

function prevPage() {
  if (currentPage.value > 1) {
    goToPage(currentPage.value - 1);
  }
}
</script>

<style lang="less" scoped>
// 颜色变量
@orange-50: #fff7ed;
@orange-100: #ffedd5;
@orange-200: #fed7aa;
@orange-300: #fdba74;
@orange-400: #fb923c;
@orange-500: #f97316;
@orange-600: #ea580c;
@orange-700: #c2410c;
@orange-800: #9a3412;
@orange-900: #7c2d12;

@orange-light: #fff9f0;
@orange-lighter: #fef3c7;

// 基础样式
.page-container {
  min-height: 100vh;
  background: linear-gradient(135deg, @orange-50 0%, white 50%, @orange-50 100%);
  padding: 3rem 0;
}

// 加载状态
.loading-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  text-align: center;
  padding: 4rem 0;
  
  .loading-text {
    font-size: 1.25rem;
    color: @orange-800;
  }
}

// 头部横幅
.banner {
  width: 100%;
  background: linear-gradient(135deg, @orange-light 0%, @orange-lighter 100%);
  display: flex;
  margin-top: -3rem;
  border-bottom: 1px solid fade(@orange-400, 20%);

  &__left {
    padding-top: 5rem;
    padding-left: 4.375rem;
    width: 60%;
    text-align: left;
    height: 15.625rem;
  }

  &__title {
    font-family: 'Arial', sans-serif;
    font-size: 3.125rem;
    font-weight: 600;
    color: @orange-900;
    animation: fadeInUp 1s ease-out;
  }

  &__subtitle {
    font-size: 1.375rem;
    color: @orange-800;
    animation: fadeInUp 1s ease-out 0.3s both;
  }

  &__right {
    height: 15.625rem;
  }

  &__image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    animation: float 6s ease-in-out infinite;
  }
}

// 内容容器
.content-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

// 卡片网格
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}

// 卡片样式
.card {
  background: white;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border: 1px solid @orange-100;
  transform: translateZ(0);

  &:hover {
    transform: scale(1.02);
    box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1);
  }

  // 图片容器
  &__image-container {
    position: relative;
    height: 16rem;
    overflow: hidden;
  }

  &__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    
    .card:hover & {
      transform: scale(1.1);
    }
  }

  &__image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      to top, 
      rgba(@orange-900, 0.5),  
      transparent
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    
    .card:hover & {
      opacity: 1;
    }
  }

  // 卡片内容
  &__content {
    padding: 1.5rem;
  }

  &__title {
    font-size: 1.25rem;
    font-weight: 600;
    color: @orange-900;
    margin-bottom: 0.5rem;
    transition: color 0.3s ease;
    
    .card:hover & {
      color: @orange-600;
    }
  }

  &__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  &__action-text {
    font-size: 0.75rem;
    color: @orange-600;
  }

  &__arrow-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: @orange-600;
    transition: transform 0.3s ease;
    
    .card:hover & {
      transform: translateX(0.5rem);
    }
  }
}

// 分页样式
.pagination {
  margin-top: 3rem;
  display: flex;
  justify-content: center;

  &__container {
    display: inline-flex;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  }

  &__button {
    position: relative;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid @orange-300;
    background: white;
    color: @orange-700;
    transition: all 0.3s ease;
    cursor: pointer;

    &:first-child {
      border-top-left-radius: 0.5rem;
      border-bottom-left-radius: 0.5rem;
    }

    &:last-child {
      border-top-right-radius: 0.5rem;
      border-bottom-right-radius: 0.5rem;
    }

    &:hover:not(:disabled) {
      background: @orange-50;
    }

    &:disabled {
      cursor: not-allowed;
      opacity: 0.7;
    }

    &--active {
      background: @orange-600;
      color: white;
      border-color: @orange-600;
      z-index: 10;
    }

    &--prev, &--next {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  &__icon {
    width: 1.25rem;
    height: 1.25rem;
    color: @orange-600;
  }
}

// 空状态
.empty-state {
  text-align: center;
  padding: 4rem 0;

  &__icon {
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1rem;
    color: @orange-400;
  }

  &__text {
    font-size: 1.25rem;
    color: @orange-700;
  }
}

// 动画
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(1.25rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-0.625rem); }
  100% { transform: translateY(0); }
}

// 自定义滚动条
::-webkit-scrollbar {
  width: 0.5rem;
}

::-webkit-scrollbar-track {
  background: @orange-100;
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb {
  background: @orange-600;
  border-radius: 9999px;

  &:hover {
    background: @orange-700;
  }
}
</style>